<!-- eslint-disable no-console -->
<script setup>
import { reactive, ref } from 'vue'
import renderGraph from './Demo_renderGraph.vue'
import Flowchart from './Flowchart.vue'

const initGraphData = reactive({
  nodes: [
    {
      id: '患者',
      label: '患者',
      cluster: '患者',
      highlight: false,
      properties: {},
    },
    {
      id: '数值属性',
      label: '数值属性',
      cluster: '数值属性',
      highlight: false,
      properties: {},
    },
    {
      id: 'BMI(kg/m/m)',
      label: 'BMI(kg/m/m)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 28.650137741046834,
      },
    },
    {
      id: 'DBP(mmHg)',
      label: 'DBP(mmHg)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 97,
      },
    },
    {
      id: 'GFR(ml/min*1.73/m/m)',
      label: 'GFR(ml/min*1.73/m/m)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 45,
      },
    },
    {
      id: 'SBP(mmHg)',
      label: 'SBP(mmHg)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 167,
      },
    },
    {
      id: '体重(kg)',
      label: '体重(kg)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 78,
      },
    },
    {
      id: '年龄(岁)',
      label: '年龄(岁)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 51,
      },
    },
    {
      id: '服用降压药数量(个)',
      label: '服用降压药数量(个)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 0,
      },
    },
    {
      id: '血钾(mmol/L)',
      label: '血钾(mmol/L)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 4,
      },
    },
    {
      id: '身高(cm)',
      label: '身高(cm)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 165,
      },
    },
    {
      id: '身高(m)',
      label: '身高(m)',
      cluster: '数值属性',
      highlight: false,
      properties: {
        value: 1.65,
      },
    },
    {
      id: '性别',
      label: '性别',
      cluster: '性别',
      highlight: false,
      properties: {},
    },
    {
      id: '男性',
      label: '男性',
      cluster: '性别',
      highlight: false,
      properties: {},
    },
    {
      id: '文本属性',
      label: '文本属性',
      cluster: '文本属性',
      highlight: false,
      properties: {},
    },
    {
      id: '缺少心率数据',
      label: '缺少心率数据',
      cluster: '文本属性',
      highlight: false,
      properties: {},
    },
    {
      id: '缺少血肌酐数据',
      label: '缺少血肌酐数据',
      cluster: '文本属性',
      highlight: false,
      properties: {},
    },
    {
      id: '疾病',
      label: '疾病',
      cluster: '疾病',
      highlight: false,
      properties: {},
    },
    {
      id: '不稳定型心绞痛',
      label: '不稳定型心绞痛',
      cluster: '疾病',
      highlight: false,
      properties: {},
    },
  ],
  edges: [
    {
      source: '患者',
      target: '数值属性',
    },
    {
      source: '数值属性',
      target: 'BMI(kg/m/m)',
    },
    {
      source: '数值属性',
      target: 'DBP(mmHg)',
    },
    {
      source: '数值属性',
      target: 'GFR(ml/min*1.73/m/m)',
    },
    {
      source: '数值属性',
      target: 'SBP(mmHg)',
    },
    {
      source: '数值属性',
      target: '体重(kg)',
    },
    {
      source: '数值属性',
      target: '年龄(岁)',
    },
    {
      source: '数值属性',
      target: '服用降压药数量(个)',
    },
    {
      source: '数值属性',
      target: '血钾(mmol/L)',
    },
    {
      source: '数值属性',
      target: '身高(cm)',
    },
    {
      source: '数值属性',
      target: '身高(m)',
    },
    {
      source: '患者',
      target: '性别',
    },
    {
      source: '性别',
      target: '男性',
    },
    {
      source: '患者',
      target: '文本属性',
    },
    {
      source: '文本属性',
      target: '缺少心率数据',
    },
    {
      source: '文本属性',
      target: '缺少血肌酐数据',
    },
    {
      source: '患者',
      target: '疾病',
    },
    {
      source: '疾病',
      target: '不稳定型心绞痛',
    },
  ],
})
const updatedData0 = reactive(
  {
    nodes: [
      {
        id: '患者',
        label: '患者',
        cluster: '患者',
        highlight: 0,
        properties: {},
      },
      {
        id: '数值属性',
        label: '数值属性',
        cluster: '数值属性',
        highlight: 0,
        properties: {},
      },
      {
        id: 'BMI(kg/m/m)',
        label: 'BMI(kg/m/m)',
        cluster: '数值属性',
        highlight: 1,
        properties: {
          value: 28.650137741046834,
          logic: [
            {
              condition: '身高(m)(数值属性),体重(kg)(数值属性)',
              parameter: '{体重(kg)} / {身高(m)} / {身高(m)}',
              result: 'BMI(kg/m/m)',
              action: 'att_compute',
              index: 3,
            },
          ],
        },
      },
      {
        id: 'DBP(mmHg)',
        label: 'DBP(mmHg)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 97,
        },
      },
      {
        id: 'GFR(ml/min*1.73/m/m)',
        label: 'GFR(ml/min*1.73/m/m)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 45,
        },
      },
      {
        id: 'SBP(mmHg)',
        label: 'SBP(mmHg)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 167,
        },
      },
      {
        id: '体重(kg)',
        label: '体重(kg)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 78,
        },
      },
      {
        id: '年龄(岁)',
        label: '年龄(岁)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 51,
        },
      },
      {
        id: '服用降压药数量(个)',
        label: '服用降压药数量(个)',
        cluster: '数值属性',
        highlight: 1,
        properties: {
          value: 0,
        },
      },
      {
        id: '血钾(mmol/L)',
        label: '血钾(mmol/L)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 4,
        },
      },
      {
        id: '身高(cm)',
        label: '身高(cm)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 165,
        },
      },
      {
        id: '身高(m)',
        label: '身高(m)',
        cluster: '数值属性',
        highlight: 1,
        properties: {
          value: 1.65,
          logic: [
            {
              condition: '身高(cm)(数值属性)',
              parameter: '{身高(cm)} / 100',
              result: '身高(m)',
              action: 'att_compute',
              index: 0,
            },
          ],
        },
      },
      {
        id: '性别',
        label: '性别',
        cluster: '性别',
        highlight: 0,
        properties: {},
      },
      {
        id: '男性',
        label: '男性',
        cluster: '性别',
        highlight: 0,
        properties: {},
      },
      {
        id: '文本属性',
        label: '文本属性',
        cluster: '文本属性',
        highlight: 1,
        properties: {},
      },
      {
        id: '缺少心率数据',
        label: '缺少心率数据',
        cluster: '文本属性',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '!心率(bpm)(数值属性)',
              parameter: null,
              result: '缺少心率数据(文本属性)',
              action: 'entity_add',
              index: 2,
            },
          ],
        },
      },
      {
        id: '缺少血肌酐数据',
        label: '缺少血肌酐数据',
        cluster: '文本属性',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '!血肌酐(mg/dl)(数值属性),!血肌酐(μmol/L)(数值属性)',
              parameter: null,
              result: '缺少血肌酐数据(文本属性)',
              action: 'entity_add',
              index: 1,
            },
          ],
        },
      },
      {
        id: '疾病',
        label: '疾病',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '不稳定型心绞痛',
        label: '不稳定型心绞痛',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
    ],
    edges: [
      {
        source: '患者',
        target: '数值属性',
      },
      {
        source: '数值属性',
        target: 'BMI(kg/m/m)',
      },
      {
        source: '数值属性',
        target: 'DBP(mmHg)',
      },
      {
        source: '数值属性',
        target: 'GFR(ml/min*1.73/m/m)',
      },
      {
        source: '数值属性',
        target: 'SBP(mmHg)',
      },
      {
        source: '数值属性',
        target: '体重(kg)',
      },
      {
        source: '数值属性',
        target: '年龄(岁)',
      },
      {
        source: '数值属性',
        target: '服用降压药数量(个)',
      },
      {
        source: '数值属性',
        target: '血钾(mmol/L)',
      },
      {
        source: '数值属性',
        target: '身高(cm)',
      },
      {
        source: '数值属性',
        target: '身高(m)',
      },
      {
        source: '患者',
        target: '性别',
      },
      {
        source: '性别',
        target: '男性',
      },
      {
        source: '患者',
        target: '文本属性',
      },
      {
        source: '文本属性',
        target: '缺少心率数据',
      },
      {
        source: '文本属性',
        target: '缺少血肌酐数据',
      },
      {
        source: '患者',
        target: '疾病',
      },
      {
        source: '疾病',
        target: '不稳定型心绞痛',
      },
    ],
  },
)
const updatedReasonData0 = reactive([
  {
    condition: '身高(cm)(数值属性)',
    parameter: '{身高(cm)} / 100',
    result: '身高(m)',
    action: 'att_compute',
    index: 0,
  },
  {
    condition: '!血肌酐(mg/dl)(数值属性),!血肌酐(μmol/L)(数值属性)',
    parameter: null,
    result: '缺少血肌酐数据(文本属性)',
    action: 'entity_add',
    index: 1,
  },
  {
    condition: '!心率(bpm)(数值属性)',
    parameter: null,
    result: '缺少心率数据(文本属性)',
    action: 'entity_add',
    index: 2,
  },
  {
    condition: '身高(m)(数值属性),体重(kg)(数值属性)',
    parameter: '{体重(kg)} / {身高(m)} / {身高(m)}',
    result: 'BMI(kg/m/m)',
    action: 'att_compute',
    index: 3,
  },
])
const updatedData1 = reactive(
  {
    nodes: [
      {
        id: '患者',
        label: '患者',
        cluster: '患者',
        highlight: 0,
        properties: {},
      },
      {
        id: '数值属性',
        label: '数值属性',
        cluster: '数值属性',
        highlight: 0,
        properties: {},
      },
      {
        id: 'BMI(kg/m/m)',
        label: 'BMI(kg/m/m)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 28.650137741046834,
        },
      },
      {
        id: 'DBP(mmHg)',
        label: 'DBP(mmHg)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 97,
        },
      },
      {
        id: 'GFR(ml/min*1.73/m/m)',
        label: 'GFR(ml/min*1.73/m/m)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 45,
        },
      },
      {
        id: 'SBP(mmHg)',
        label: 'SBP(mmHg)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 167,
        },
      },
      {
        id: '体重(kg)',
        label: '体重(kg)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 78,
        },
      },
      {
        id: '年龄(岁)',
        label: '年龄(岁)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 51,
        },
      },
      {
        id: '服用降压药数量(个)',
        label: '服用降压药数量(个)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 0,
        },
      },
      {
        id: '血钾(mmol/L)',
        label: '血钾(mmol/L)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 4,
        },
      },
      {
        id: '身高(cm)',
        label: '身高(cm)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 165,
        },
      },
      {
        id: '身高(m)',
        label: '身高(m)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 1.65,
        },
      },
      {
        id: '性别',
        label: '性别',
        cluster: '性别',
        highlight: 0,
        properties: {},
      },
      {
        id: '男性',
        label: '男性',
        cluster: '性别',
        highlight: 0,
        properties: {},
      },
      {
        id: '文本属性',
        label: '文本属性',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '缺少血肌酐数据',
        label: '缺少血肌酐数据',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '肥胖',
        label: '肥胖',
        cluster: '文本属性',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '({BMI(kg/m/m):>=28(数值比较)})',
              relation: '诊断',
              result: '肥胖(文本属性)',
              action: 'entity_add',
              index: 3,
            },
          ],
        },
      },
      {
        id: '缺少心率数据',
        label: '缺少心率数据',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '疾病',
        label: '疾病',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '高血压',
        label: '高血压',
        cluster: '疾病',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '(({SBP(mmHg):>=140(数值比较)}||{DBP(mmHg):>=90(数值比较)}))',
              relation: '诊断',
              result: '高血压(疾病),1级高血压(血压水平分级)',
              action: 'entity_add',
              index: 0,
            },
            {
              condition: '(({SBP(mmHg):>=160(数值比较)}||{DBP(mmHg):>=100(数值比较)}))',
              relation: '诊断',
              result: '高血压(疾病),2级高血压(血压水平分级)',
              action: 'entity_add',
              index: 1,
            },
          ],
        },
      },
      {
        id: '不稳定型心绞痛',
        label: '不稳定型心绞痛',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '慢性肾病3期',
        label: '慢性肾病3期',
        cluster: '疾病',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '({GFR(ml/min*1.73/m/m):>=30(数值比较)},{GFR(ml/min*1.73/m/m):<=59(数值比较)})',
              relation: '诊断',
              result: '慢性肾病3期(疾病)',
              action: 'entity_add',
              index: 4,
            },
          ],
        },
      },
      {
        id: '血压水平分级',
        label: '血压水平分级',
        cluster: '血压水平分级',
        highlight: 1,
        properties: {},
      },
      {
        id: '1级高血压',
        label: '1级高血压',
        cluster: '血压水平分级',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '(({SBP(mmHg):>=140(数值比较)}||{DBP(mmHg):>=90(数值比较)}))',
              relation: '诊断',
              result: '高血压(疾病),1级高血压(血压水平分级)',
              action: 'entity_add',
              index: 0,
            },
          ],
        },
      },
      {
        id: '2级高血压',
        label: '2级高血压',
        cluster: '血压水平分级',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '(({SBP(mmHg):>=160(数值比较)}||{DBP(mmHg):>=100(数值比较)}))',
              relation: '诊断',
              result: '高血压(疾病),2级高血压(血压水平分级)',
              action: 'entity_add',
              index: 1,
            },
          ],
        },
      },
      {
        id: '血压正常高值',
        label: '血压正常高值',
        cluster: '血压水平分级',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '(({SBP(mmHg):>=120(数值比较)}||{DBP(mmHg):>=80(数值比较)}))',
              relation: '诊断',
              result: '血压正常高值(血压水平分级)',
              action: 'entity_add',
              index: 2,
            },
          ],
        },
      },
    ],
    edges: [
      {
        source: '患者',
        target: '数值属性',
      },
      {
        source: '数值属性',
        target: 'BMI(kg/m/m)',
      },
      {
        source: '数值属性',
        target: 'DBP(mmHg)',
      },
      {
        source: '数值属性',
        target: 'GFR(ml/min*1.73/m/m)',
      },
      {
        source: '数值属性',
        target: 'SBP(mmHg)',
      },
      {
        source: '数值属性',
        target: '体重(kg)',
      },
      {
        source: '数值属性',
        target: '年龄(岁)',
      },
      {
        source: '数值属性',
        target: '服用降压药数量(个)',
      },
      {
        source: '数值属性',
        target: '血钾(mmol/L)',
      },
      {
        source: '数值属性',
        target: '身高(cm)',
      },
      {
        source: '数值属性',
        target: '身高(m)',
      },
      {
        source: '患者',
        target: '性别',
      },
      {
        source: '性别',
        target: '男性',
      },
      {
        source: '患者',
        target: '文本属性',
      },
      {
        source: '文本属性',
        target: '缺少血肌酐数据',
      },
      {
        source: '文本属性',
        target: '肥胖',
      },
      {
        source: '文本属性',
        target: '缺少心率数据',
      },
      {
        source: '患者',
        target: '疾病',
      },
      {
        source: '疾病',
        target: '高血压',
      },
      {
        source: '疾病',
        target: '不稳定型心绞痛',
      },
      {
        source: '疾病',
        target: '慢性肾病3期',
      },
      {
        source: '患者',
        target: '血压水平分级',
      },
      {
        source: '血压水平分级',
        target: '1级高血压',
      },
      {
        source: '血压水平分级',
        target: '2级高血压',
      },
      {
        source: '血压水平分级',
        target: '血压正常高值',
      },
    ],
  },
)
const updatedReasonData1 = reactive([
  {
    condition: '(({SBP(mmHg):>=140(数值比较)}||{DBP(mmHg):>=90(数值比较)}))',
    relation: '诊断',
    result: '高血压(疾病),1级高血压(血压水平分级)',
    action: 'entity_add',
  },
  {
    condition: '(({SBP(mmHg):>=160(数值比较)}||{DBP(mmHg):>=100(数值比较)}))',
    relation: '诊断',
    result: '高血压(疾病),2级高血压(血压水平分级)',
    action: 'entity_add',
  },
  {
    condition: '(({SBP(mmHg):>=120(数值比较)}||{DBP(mmHg):>=80(数值比较)}))',
    relation: '诊断',
    result: '血压正常高值(血压水平分级)',
    action: 'entity_add',
  },
  {
    condition: '({BMI(kg\/m\/m):>=28(数值比较)})',
    relation: '诊断',
    result: '肥胖(文本属性)',
    action: 'entity_add',
  },
  {
    condition: '({GFR(ml\/min*1.73\/m\/m):>=30(数值比较)},{GFR(ml\/min*1.73\/m\/m):<=59(数值比较)})',
    relation: '诊断',
    result: '慢性肾病3期(疾病)',
    action: 'entity_add',
  },
])

const updatedData2 = reactive(
  {
    nodes: [
      {
        id: '患者',
        label: '患者',
        cluster: '患者',
        highlight: 0,
        properties: {},
      },
      {
        id: '数值属性',
        label: '数值属性',
        cluster: '数值属性',
        highlight: 0,
        properties: {},
      },
      {
        id: 'BMI(kg/m/m)',
        label: 'BMI(kg/m/m)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 28.650137741046834,
        },
      },
      {
        id: 'DBP(mmHg)',
        label: 'DBP(mmHg)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 97,
        },
      },
      {
        id: 'GFR(ml/min*1.73/m/m)',
        label: 'GFR(ml/min*1.73/m/m)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 45,
        },
      },
      {
        id: 'SBP(mmHg)',
        label: 'SBP(mmHg)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 167,
        },
      },
      {
        id: '体重(kg)',
        label: '体重(kg)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 78,
        },
      },
      {
        id: '年龄(岁)',
        label: '年龄(岁)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 51,
        },
      },
      {
        id: '心血管危险因素(个)',
        label: '心血管危险因素(个)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 1,
        },
      },
      {
        id: '服用降压药数量(个)',
        label: '服用降压药数量(个)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 0,
        },
      },
      {
        id: '血钾(mmol/L)',
        label: '血钾(mmol/L)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 4,
        },
      },
      {
        id: '身高(cm)',
        label: '身高(cm)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 165,
        },
      },
      {
        id: '身高(m)',
        label: '身高(m)',
        cluster: '数值属性',
        highlight: 0,
        properties: {
          value: 1.65,
        },
      },
      {
        id: '性别',
        label: '性别',
        cluster: '性别',
        highlight: 0,
        properties: {},
      },
      {
        id: '男性',
        label: '男性',
        cluster: '性别',
        highlight: 0,
        properties: {},
      },
      {
        id: '文本属性',
        label: '文本属性',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '心血管危险因素-肥胖',
        label: '心血管危险因素-肥胖',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '肥胖',
        label: '肥胖',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '缺少心率数据',
        label: '缺少心率数据',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '临床并发症-心脏疾病',
        label: '临床并发症-心脏疾病',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '缺少血肌酐数据',
        label: '缺少血肌酐数据',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '靶器官损害-肾脏',
        label: '靶器官损害-肾脏',
        cluster: '文本属性',
        highlight: 0,
        properties: {},
      },
      {
        id: '疾病',
        label: '疾病',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '不稳定型心绞痛',
        label: '不稳定型心绞痛',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '冠心病',
        label: '冠心病',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '急性冠脉综合征',
        label: '急性冠脉综合征',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '非ST段抬高急性冠脉综合征',
        label: '非ST段抬高急性冠脉综合征',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '慢性肾病',
        label: '慢性肾病',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '高血压',
        label: '高血压',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '肾功能不全',
        label: '肾功能不全',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '慢性肾病3期',
        label: '慢性肾病3期',
        cluster: '疾病',
        highlight: 0,
        properties: {},
      },
      {
        id: '血压水平分级',
        label: '血压水平分级',
        cluster: '血压水平分级',
        highlight: 0,
        properties: {},
      },
      {
        id: '2级高血压',
        label: '2级高血压',
        cluster: '血压水平分级',
        highlight: 0,
        properties: {},
      },
      {
        id: '高血压分层',
        label: '高血压分层',
        cluster: '高血压分层',
        highlight: 0,
        properties: {},
      },
      {
        id: '靶器官损害',
        label: '靶器官损害',
        cluster: '高血压分层',
        highlight: 0,
        properties: {},
      },
      {
        id: '临床并发症',
        label: '临床并发症',
        cluster: '高血压分层',
        highlight: 0,
        properties: {},
      },
      {
        id: '高血压风险分层',
        label: '高血压风险分层',
        cluster: '高血压风险分层',
        highlight: 1,
        properties: {},
      },
      {
        id: '中危',
        label: '中危',
        cluster: '高血压风险分层',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '(({心血管危险因素(个):>=3(数值比较)}||{靶器官损害(高血压分层)}||{无并发症的糖尿病(文本属性)}),({SBP(mmHg):>=130(数值比较)}||{DBP(mmHg):>=85(数值比较)}))',
              relation: '危险水平分层',
              result: '中危(高血压风险分层)',
              action: 'entity_add',
              index: 3,
            },
            {
              condition: '({心血管危险因素(个):<3(数值比较)},{心血管危险因素(个):>=1(数值比较)},({SBP(mmHg):>=140(数值比较)}||{DBP(mmHg):>=90(数值比较)}))',
              relation: '危险水平分层',
              result: '中危(高血压风险分层)',
              action: 'entity_add',
              index: 4,
            },
            {
              condition: '({2级高血压(血压水平分级)})',
              relation: '危险水平分层',
              result: '中危(高血压风险分层)',
              action: 'entity_add',
              index: 6,
            },
          ],
        },
      },
      {
        id: '很高危',
        label: '很高危',
        cluster: '高血压风险分层',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '(({临床并发症(高血压分层)}||{有并发症的糖尿病(文本属性)}),({SBP(mmHg):>=140(数值比较)}||{DBP(mmHg):>=90(数值比较)}))',
              relation: '危险水平分层',
              result: '很高危(高血压风险分层)',
              action: 'entity_add',
              index: 0,
            },
          ],
        },
      },
      {
        id: '高危',
        label: '高危',
        cluster: '高血压风险分层',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '(({临床并发症(高血压分层)}||{有并发症的糖尿病(文本属性)}),({SBP(mmHg):>=130(数值比较)}||{DBP(mmHg):>=85(数值比较)}))',
              relation: '危险水平分层',
              result: '高危(高血压风险分层)',
              action: 'entity_add',
              index: 1,
            },
            {
              condition: '(({心血管危险因素(个):>=3(数值比较)}||{靶器官损害(高血压分层)}||{无并发症的糖尿病(文本属性)}),({SBP(mmHg):>=140(数值比较)}||{DBP(mmHg):>=90(数值比较)}))',
              relation: '危险水平分层',
              result: '高危(高血压风险分层)',
              action: 'entity_add',
              index: 2,
            },
          ],
        },
      },
      {
        id: '低危',
        label: '低危',
        cluster: '高血压风险分层',
        highlight: 1,
        properties: {
          logic: [
            {
              condition: '({心血管危险因素(个):<3(数值比较)},{心血管危险因素(个):>=1(数值比较)},({SBP(mmHg):>=130(数值比较)}||{DBP(mmHg):>=85(数值比较)}))',
              relation: '危险水平分层',
              result: '低危(高血压风险分层)',
              action: 'entity_add',
              index: 5,
            },
          ],
        },
      },
    ],
    edges: [
      {
        source: '患者',
        target: '数值属性',
      },
      {
        source: '数值属性',
        target: 'BMI(kg/m/m)',
      },
      {
        source: '数值属性',
        target: 'DBP(mmHg)',
      },
      {
        source: '数值属性',
        target: 'GFR(ml/min*1.73/m/m)',
      },
      {
        source: '数值属性',
        target: 'SBP(mmHg)',
      },
      {
        source: '数值属性',
        target: '体重(kg)',
      },
      {
        source: '数值属性',
        target: '年龄(岁)',
      },
      {
        source: '数值属性',
        target: '心血管危险因素(个)',
      },
      {
        source: '数值属性',
        target: '服用降压药数量(个)',
      },
      {
        source: '数值属性',
        target: '血钾(mmol/L)',
      },
      {
        source: '数值属性',
        target: '身高(cm)',
      },
      {
        source: '数值属性',
        target: '身高(m)',
      },
      {
        source: '患者',
        target: '性别',
      },
      {
        source: '性别',
        target: '男性',
      },
      {
        source: '患者',
        target: '文本属性',
      },
      {
        source: '文本属性',
        target: '心血管危险因素-肥胖',
      },
      {
        source: '文本属性',
        target: '肥胖',
      },
      {
        source: '文本属性',
        target: '缺少心率数据',
      },
      {
        source: '文本属性',
        target: '临床并发症-心脏疾病',
      },
      {
        source: '文本属性',
        target: '缺少血肌酐数据',
      },
      {
        source: '文本属性',
        target: '靶器官损害-肾脏',
      },
      {
        source: '患者',
        target: '疾病',
      },
      {
        source: '疾病',
        target: '不稳定型心绞痛',
      },
      {
        source: '疾病',
        target: '冠心病',
      },
      {
        source: '疾病',
        target: '急性冠脉综合征',
      },
      {
        source: '疾病',
        target: '非ST段抬高急性冠脉综合征',
      },
      {
        source: '疾病',
        target: '慢性肾病',
      },
      {
        source: '疾病',
        target: '高血压',
      },
      {
        source: '疾病',
        target: '肾功能不全',
      },
      {
        source: '疾病',
        target: '慢性肾病3期',
      },
      {
        source: '患者',
        target: '血压水平分级',
      },
      {
        source: '血压水平分级',
        target: '2级高血压',
      },
      {
        source: '患者',
        target: '高血压分层',
      },
      {
        source: '高血压分层',
        target: '靶器官损害',
      },
      {
        source: '高血压分层',
        target: '临床并发症',
      },
      {
        source: '患者',
        target: '高血压风险分层',
      },
      {
        source: '高血压风险分层',
        target: '中危',
      },
      {
        source: '高血压风险分层',
        target: '很高危',
      },
      {
        source: '高血压风险分层',
        target: '高危',
      },
      {
        source: '高血压风险分层',
        target: '低危',
      },
    ],
  },
)
const updatedReasonData2 = reactive([
  {
    condition: '(({临床并发症(高血压分层)}||{有并发症的糖尿病(文本属性)}),({SBP(mmHg):>=140(数值比较)}||{DBP(mmHg):>=90(数值比较)}))',
    relation: '危险水平分层',
    result: '很高危(高血压风险分层)',
    action: 'entity_add',
    index: 0,
  },
  {
    condition: '(({临床并发症(高血压分层)}||{有并发症的糖尿病(文本属性)}),({SBP(mmHg):>=130(数值比较)}||{DBP(mmHg):>=85(数值比较)}))',
    relation: '危险水平分层',
    result: '高危(高血压风险分层)',
    action: 'entity_add',
    index: 1,
  },
  {
    condition: '(({心血管危险因素(个):>=3(数值比较)}||{靶器官损害(高血压分层)}||{无并发症的糖尿病(文本属性)}),({SBP(mmHg):>=140(数值比较)}||{DBP(mmHg):>=90(数值比较)}))',
    relation: '危险水平分层',
    result: '高危(高血压风险分层)',
    action: 'entity_add',
    index: 2,
  },
  {
    condition: '(({心血管危险因素(个):>=3(数值比较)}||{靶器官损害(高血压分层)}||{无并发症的糖尿病(文本属性)}),({SBP(mmHg):>=130(数值比较)}||{DBP(mmHg):>=85(数值比较)}))',
    relation: '危险水平分层',
    result: '中危(高血压风险分层)',
    action: 'entity_add',
    index: 3,
  },
  {
    condition: '({心血管危险因素(个):<3(数值比较)},{心血管危险因素(个):>=1(数值比较)},({SBP(mmHg):>=140(数值比较)}||{DBP(mmHg):>=90(数值比较)}))',
    relation: '危险水平分层',
    result: '中危(高血压风险分层)',
    action: 'entity_add',
    index: 4,
  },
  {
    condition: '({心血管危险因素(个):<3(数值比较)},{心血管危险因素(个):>=1(数值比较)},({SBP(mmHg):>=130(数值比较)}||{DBP(mmHg):>=85(数值比较)}))',
    relation: '危险水平分层',
    result: '低危(高血压风险分层)',
    action: 'entity_add',
    index: 5,
  },
  {
    condition: '({2级高血压(血压水平分级)})',
    relation: '危险水平分层',
    result: '中危(高血压风险分层)',
    action: 'entity_add',
    index: 6,
  },
])

const curId = ref(0)
let graphData = initGraphData
const initReasonData = [{
  condition: '暂无',
  relation: '暂无',
  result: '暂无',
  action: '暂无',
}]
let ReasonData = initReasonData
console.log('初始化G6数据', graphData)

function updateData() {
  // 更新数值属性和文本实体
  // initialData.nodes = receive().nodes
  // initialData.edges = receive().edges
  // 以下做测试用,联调时直接用上面即可
  initGraphData.nodes = updatedData1.nodes
  initGraphData.edges = updatedData1.edges
  graphData = { ...initGraphData } // 新建一个对象，为了触发props
  ReasonData = updatedReasonData1
  console.log('数据层更新reason数据', ReasonData)
  curId.value++
  console.log('数据层传入G6的数据', graphData)
}

function updateStep(param) {
  const stepName = param.stepName
  console.log('Graph组件接到更改step请求:')
  console.log(stepName)
  // 移除表格中所有行的高亮样式
  document.querySelectorAll('#reasonList tbody tr').forEach((element) => {
    element.classList.remove('highlight')
  })
  switch (stepName) {
    case '原始病例':
      graphData = { ...initGraphData } // 新建一个对象，为了触发props
      ReasonData = initReasonData
      curId.value++
      console.log(curId.value)
      console.log('数据层传入G6的数据', graphData)
      console.log('数据层更新reason数据', ReasonData)
      break
    case '预处理':
      graphData = { ...updatedData0 }
      ReasonData = updatedReasonData0
      curId.value++
      console.log('数据层传入G6的数据', graphData)
      console.log('数据层更新reason数据', ReasonData)
      break
    case '血压分级':
      graphData = { ...updatedData1 } // 新建一个对象，为了触发props
      ReasonData = updatedReasonData1
      curId.value++
      console.log('数据层传入G6的数据', graphData)
      console.log('数据层更新reason数据', ReasonData)
      break
    case '危险分层':
      graphData = { ...updatedData2 } // 新建一个对象，为了触发props
      ReasonData = updatedReasonData2
      curId.value++
      console.log('数据层传入G6的数据', graphData)
      console.log('数据层更新reason数据', ReasonData)
      break
  }
}
</script>

<template>
  <div class="page-container">
    <div ref="graphContainer" class="g6">
      <renderGraph :key="curId" :graph-data="graphData" />
      <!-- 用curId作为同步信号 -->
    </div>
    <div class="middle-section">
      <!-- 推理知识组件 -->
      <table id="reasonList">
        <thead>
          <tr>
            <th>条件</th>
            <th>结果</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in ReasonData" :key="index">
            <td>{{ item.condition }}</td>
            <td>{{ item.result }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div ref="flowchartContainer" class="bottom-section">
      <!-- 推理步骤组件 -->
      <!-- <button type="primary" style="background-color: green; color: white" @click="updateData">
        Update Data
      </button> -->
      <Flowchart @stepNodeClicked="updateStep" />
    </div>
  </div>
</template>

<style scoped>
  .page-container {
    display: flex;
    flex-direction: column; /* 设置为列方向以垂直堆叠块 */
    height: 100%; /* 占据视口的全高 */
  }
  .g6 {
    flex: 6; /* 上部分占据 5 的比例 */
    background-color: rgba(244, 246, 246, 0.689);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .middle-section {
    flex: 3;
    background-color: #f0f0f0;
    overflow-y: auto; /*过长添加滚动条 */
    min-height: 100px;
  }
  .bottom-section {
    flex: 2;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /*最小高度，保证按钮正常显示 */
    /* border: 1px solid rgba(120, 127, 125, 0.275) */
  }
  .button {
    background-color: rgba(124, 175, 175, 0.689);
    padding: 10px 20px;
  }
  .highlight {
    font-weight: bold;
    background-color: rgb(253, 253, 125);
}
table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f2f2f2;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
th, td:first-child {
  border-right: 1px solid #ddd; /* 添加一条竖线作为边框 */
}
tbody {
  display: block;
  max-height: 200px;
  overflow-y: scroll;
}
tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
</style>
